<!--
 * @Description: 流程头部操作按钮
 * @Author: wangwangwang
 * @Date: 2020-12-21 09:55:05
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-09-08 17:42:24
-->
<template>
  <el-header style="margin-bottom: 20px; background: #fff; border-radius: 4px">
    <div class="handle-container">
      <el-row type="flex" align="middle">
        <el-col>
          <el-button :disabled="isReadOnly" size="medium" class="bottom_all" style="margin-left: 0;" @click="saveSubmit()">保存</el-button>
          <el-button :disabled="isReadOnly" size="medium" class="bottom_all_two" @click="sendSubmit()">提交</el-button>
          <el-button v-if="isinit" size="medium" class="bottom_all_two" @click="associatedProcess()">关联流程</el-button>
          <el-button v-if="hasBackPermiss" :disabled="!isReadOnly" size="medium" class="bottom_three" style="margin-left: 24px;" @click="handleBackEnd">撤销</el-button>
          <el-button v-if="$route.query.taskType * 1 === 2" size="medium" class="bottom_three" style="margin-left: 24px;" @click="handleBackEnd">撤销</el-button>
        </el-col>
        <el-col v-if="!isinit&&!isReadOnly2" style="text-align:right;">
          <el-button size="mini" icon="el-icon-position" type="text" class="bottom_text" @click="handleCC">抄送</el-button>
          <el-button :disabled="isReadOnly" size="mini" icon="el-icon-tickets" type="text" class="bottom_text" @click="handleAssign">交办</el-button>
          <el-button :disabled="isReadOnly" size="mini" icon="el-icon-d-arrow-right" type="text" class="bottom_text" @click="handleBackUp">回退</el-button>
          <el-button :disabled="isReadOnly" size="mini" icon="el-icon-document" type="text" class="bottom_text" @click="handleAssist">协审</el-button>
          <el-button :disabled="isReadOnly" size="mini" icon="el-icon-collection-tag" type="text" class="bottom_text" @click="handleNode">加减签</el-button>
          <el-button size="mini" icon="el-icon-set-up" type="text" class="bottom_text" @click="handleNodeImage">流程图</el-button>
          <el-button size="mini" icon="el-icon-star-off" type="text" class="bottom_text" @click="handleCollection">收藏任务</el-button>
          <el-button size="mini" icon="el-icon-s-promotion" type="text" class="bottom_text" @click="showAssociated">关联流程</el-button>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-dialogDrag :visible.sync="visible" width="90%">
      <span slot="title">关联流程</span>
      <div v-if="isinit" class="tabtop">
        <div v-for="(item, index) in taskList" :key="index" @click="choose(item.id)">
          <div :class="currentIndex == index ? 'active' : 'text'">{{ item.name }}</div>
        </div>
      </div>
      <div v-if="isinit">
        可关联任务
        <div class="dialoginfo">
          <div>
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="dataSource1" tooltip-effect="dark">
              <el-table-column prop="code" label="编码" align="center"></el-table-column>
              <el-table-column prop="taskTypeName" label="任务分类" align="center"></el-table-column>
              <el-table-column prop="taskName" label="名称" align="center"></el-table-column>
              <el-table-column prop="createUserName" label="提交人" align="center"></el-table-column>
              <el-table-column prop="userOrganizationName" label="提交人机构" align="center"></el-table-column>
              <el-table-column prop="userDepartmentName" label="提交人部门" align="center"></el-table-column>
              <el-table-column prop="taskStatus" label="状态" align="center">
                <template slot-scope="scope">
                  <el-tag v-if='scope.row.taskStatus===1' type="success">待提交</el-tag>
                  <el-tag v-if='scope.row.taskStatus===2' type="info">待审批</el-tag>
                  <el-tag v-if='scope.row.taskStatus===3' type="warning">已结束</el-tag>
                  <el-tag v-if='scope.row.taskStatus===4' type="danger">已撤销</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
              <el-table-column prop="timekeeping" label="是否计时" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.timekeeping*1===1?'计时':'非计时'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="updateUserName" label="执行人" align="center"></el-table-column>
              <el-table-column prop="updateTime" label="执行时间" align="center"></el-table-column>
              <el-table-column prop="intergalCount" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button class="bottom_all" @click="addSubmit(scope.row)">添加</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div style="display:flex; align-items:center;">
              <div class="top_page_totle">总共{{ total1 }}条</div>
              <el-pagination :current-page.sync="page1" :page-size="10" layout="prev,pager,next" :total="total1" @current-change="initData1()"></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div>
        已关联任务
        <div class="dialoginfo">
          <div>
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="dataSource2" tooltip-effect="dark">
              <el-table-column prop="code" label="编码" align="center"></el-table-column>
              <el-table-column prop="taskTypeName" label="任务分类" align="center"></el-table-column>
              <el-table-column prop="taskName" label="名称" align="center"></el-table-column>
              <el-table-column prop="createUserName" label="提交人" align="center"></el-table-column>
              <el-table-column prop="userOrganizationName" label="提交人机构" align="center"></el-table-column>
              <el-table-column prop="userDepartmentName" label="提交人部门" align="center"></el-table-column>
              <el-table-column prop="taskStatus" label="状态" align="center">
                <template slot-scope="scope">
                  <el-tag v-if='scope.row.taskStatus===1' type="success">待提交</el-tag>
                  <el-tag v-if='scope.row.taskStatus===2' type="info">待审批</el-tag>
                  <el-tag v-if='scope.row.taskStatus===3' type="warning">已结束</el-tag>
                  <el-tag v-if='scope.row.taskStatus===4' type="danger">已撤销</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
              <el-table-column prop="timekeeping" label="是否计时" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.timekeeping*1===1?'计时':'非计时'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="updateUserName" label="执行人" align="center"></el-table-column>
              <el-table-column prop="updateTime" label="执行时间" align="center"></el-table-column>
              <el-table-column prop="intergalCount" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button v-if="isinit" class="bottom_all" @click="deleteSubmit(scope.row)">删除</el-button>
                  <el-button v-if="!isinit" class="bottom_all" @click="handleDetails(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div style="display:flex; align-items:center;">
              <div class="top_page_totle">总共{{ total2 }}条</div>
              <el-pagination :current-page.sync="page2" :page-size="10" layout="prev,pager,next" :total="total2" @current-change="initData2()"></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="visible=false">取 消</el-button>
      </span>
    </el-dialog>
  </el-header>
</template>
<script>
import { getUserInfo } from "@/utils/auth";
import { mapGetters } from "vuex";
import { backlogQueryPage, myOutTaskQueryPage, submitTaskQueryPage, finishedTaskQueryPage, collectQueryPage, tailAfterTaskQueryPage, saveTaskJoinCenter, deleteTaskJoinCenter, taskJoinQueryPage } from '@/api/api';
export default {
  props: ['isReadOnly2'],
  data() {
    return {
      hasBackPermiss: false,
      isReadOnly: false,
      isinit: false,
      visible: false,
      currentIndex: 0,
      taskList: [{
        name: '待办任务',
        id: 0
      }, {
        name: '本人发起',
        id: 1
      }, {
        name: '提交任务',
        id: 2
      }, {
        name: '已办任务',
        id: 3
      }, {
        name: '收藏任务',
        id: 4
      }, {
        name: '跟踪事项',
        id: 5
      }],
      dataSource1: [],
      dataSource2: [],
      page1: 1,
      page2: 1,
      total1: 0,
      total2: 0,
    }
  },
  computed: {
    ...mapGetters({
      flowsId: "user/getFlowsId",
      processTaskId: 'getProcessTaskId',
    }),
  },
  methods: {
    showAssociated () {
      this.visible = true;
      this.initData2();
    },
    addSubmit (data) {
      const params  = {
        sourceTaskId: this.processTaskId,
        targetTaskId: data.id,
      }
      saveTaskJoinCenter(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('关联成功')
          this.initData2();
          this.initData1();
          this.page2 = 1;
        }
      })
    },
    deleteSubmit (data) {
      const params  = {
        sourceTaskId: this.processTaskId,
        targetTaskId: data.id,
      }
      deleteTaskJoinCenter(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('删除成功');
          this.initData1();
          this.initData2();
        }
      })
    },
    handleDetails (data) {
      if (data.formType === 1) { // 自定义表单
        const query = {
          processManagerId: data.processManagerId,
          processTaskId: data.id,
          processVersionId: data.versionNumber,
          receiptNumber: data.receiptNumber,
          taskName: data.taskName,
          taskStatus: data.taskStatus,
          createTime: data.createTime,
          createUserName: data.createUserName,
          type: 2,
          taskType: 5,
          isReadOnly: 1
        }
        /**
         * @Description: 如果是待发流程往发起跳转
         * @param {*}
         * @Author: wangwangwang
         */
        this.$router.push({ name: 'taskDetails', query });
        return
      }
      const query = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
        dataContent: data.dataContent,
        createTime: data.createTime,
        createUserName: data.createUserName,
        taskName: data.taskName,
        taskStatus: data.taskStatus,
        type: 2, // 1为发起 2为详情审批
        taskType: 5,
        isReadOnly: 1,
      }
      this.$router.push({ name: data.dataSource, query });
    },
    initData1 () {
      let url = '';
      switch (this.currentIndex) {
        case 0:
          url = backlogQueryPage;
          break;
        case 1:
          url = myOutTaskQueryPage;
          break;
        case 2:
          url = submitTaskQueryPage;
          break;
        case 3:
          url = finishedTaskQueryPage;
          break;
        case 4:
          url = collectQueryPage;
          break;
        case 5:
          url = tailAfterTaskQueryPage;
          break;
        default:
          break;
      }
      const params = {
        page: this.page1,
        pageSize: 10,
        id: this.processTaskId,
      }
      url(params).then(res => {
        if (res.code === 1001) {
          this.dataSource1 = res.data.data;
          this.total1 = res.data.totalRows;
        }
      })
    },
    initData2 () {
      const { query } = this.$route;
      taskJoinQueryPage({id: this.processTaskId || query.processTaskId,page: this.page2, pageSize: 10}).then(res => {
        if (res.code === 1001) {
          this.dataSource2 = res.data.data;
          this.total2 = res.data.totalRows;
        }
      })
    },
    choose (index) {
      this.currentIndex = index;
      this.page1 = 1;
      this.initData1();
    },
    saveSubmit() {
      this.$emit('saveSubmit');
    },
    sendSubmit() {
      this.$emit('sendSubmit');
    },
    handleBackEnd() {
      this.$emit('handleBackEnd');
    },
    handleCC() {
      this.$emit('handleCC');
    },
    handleAssign() {
      this.$emit('handleAssign');
    },
    handleBackUp() {
      this.$emit('handleBackUp');
    },
    handleAssist() {
      this.$emit('handleAssist');
    },
    handleNode() {
      this.$emit('handleNode');
    },
    handleNodeImage() {
      this.$emit('handleNodeImage');
    },
    handleCollection() {
      this.$emit('handleCollection');
    },
    associatedProcess () {
      if (!this.processTaskId) {
        this.$message.warning('不存在流程ID，请保存后再进行关联流程')
        return
      }
      this.visible = true;
      this.page1 = 1;
      this.page2 = 1;
      this.initData1();
      this.initData2();
    }
  },
  mounted() {
    const { query } = this.$route;
    this.isinit = query.type * 1 === 1 || !query.type || query.type * 1 === 10;
    this.isReadOnly = query.isReadOnly*1===1;
    setTimeout(() => {
      if (this.flowsId === getUserInfo().userId) this.hasBackPermiss = true;
    }, 500)
  }
}
</script>
<style scoped lang="scss">
.handle-container {
  width: 100%;
}
.tabtop{
  width: 840px !important;
  margin: 0 !important;
}
.tabtop > div{
  width: 140px !important;
}
</style>

